<template>
  <div>
    <el-dialog v-model="dialogVisible" title="发送邮件" width="30%">
      <div class="dialog-input">
        <span class="label">输入内容:</span
        ><el-input
          v-model="content"
          style="width: 300px"
          :autosize="{ minRows: 2, maxRows: 8 }"
          type="textarea"
          placeholder="输入内容"
        />
      </div>
      <div style="width: 100%; text-align: center">
        <FilesUpload
          v-model:uidList="uidList"
          v-model:files="files"
          :uploadType="4"
          label="选择图片"
          ref="emailFileRef"
        ></FilesUpload>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSend"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import FilesUpload from "@/view/components/files-upload.vue";
import { uploadFile } from "@/api/file";
import { addUserSendEmailContent } from "@/api/user";
const emits = defineEmits(["handleChenkUserEmail"]);
import { ElMessage } from "element-plus";
const emailFileRef = ref();
const uidList = ref([]);
const files = ref([]);
const urlList = ref<string>("");
const uidNameList = ref<string[]>([]);
const handleSend = async () => {
  urlList.value = "";
  uidList.value.forEach(
    (item: { pictureRealPath: string; uuidName: string }) => {
      urlList.value += item.pictureRealPath;
    }
  );
  uidNameList.value = [];
  uidList.value.forEach(
    (item: { pictureRealPath: string; uuidName: string }) => {
      uidNameList.value.push(item.uuidName);
    }
  );

  uidNameList.value.forEach(async (item: string, index: number) => {
    await uploadFile(files.value[index], item, 4).then(() => {});
  });
  await addUserSendEmailContent({
    content: content.value,
    messageType: 1,
    pictureUrl: urlList.value,
    receiveUserId: sendToUserId.value,
  }).then((res: any) => {
    content.value = "";
    uidList.value = [];
    files.value = [];
    uidNameList.value = [];
    urlList.value = "";
    emailFileRef.value.resetFile();
    emits("handleChenkUserEmail");
    ElMessage({
      message: res.message,
      type: "success",
    });

    dialogVisible.value = false;
  });
};
const dialogVisible = ref(false);
const content = ref("");
const sendToUserId = ref<number | string>();
const showDialog = (id: number | string) => {
  sendToUserId.value = id;
  dialogVisible.value = true;
};
defineExpose({
  showDialog,
});
</script>

<style scoped lang="less">
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.dialog-input {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  .label {
    margin: 10px;
  }
}
</style>
